/**
 * Created by Administrator on 2017/3/17.
 */
/**
 * SeamlessScroll组件
 *
 * @class SeamlessScroll
 * @extends Basic
 *
 * @param [speed] 滚动速度
 * @param [type] 1：无缝滚动，2：间歇滚动:只有向上滚动的场景
 * @param [stopTime] 间歇滚动停顿时间
 *
 * 示例:
 *
 *     @example
 *
 *
 *
 *     <SeamlessScroll >
 *          <ul>
 *              <li>1分钟前某企业投资了1,000元 </li>
 *              <li>投资 6</li>
 *              <li>投资 7</li>
 *              <li>投资 8</li>
 *              <li>投资 9</li>
 *              <li>投资 10</li>
 *              <li>登录时为什么会提示账户被锁定</li>
 *              <li>如何查询我的投标情况？</li>
 *              <li>为什么我会支付不成功？</li>
 *              <li>怎么计算项目实际收益？</li>
 *          </ul>
 *      </SeamlessScroll>
 */
var SeamlessScroll = React.createClass({
    getDefaultProps: function(){
        return {
            config: {
                speed: 33,  //滚动速度
                type: 1,    //1：无缝滚动，2：间歇滚动:只有向上滚动的场景
                stopTime: 3000  //间歇滚动停顿时间
            }
        }
    },
    componentDidMount: function(){
        this.marginTop = 0;
        this.scrollHandler();
        /*if (window.addEventListener) {
            window.addEventListener('blur', this.onWindowBlur.bind(this));
            window.addEventListener('focus', this.onWindowFocus.bind(this));
        } else {
            window.attachEvent('blur', this.onWindowBlur.bind(this));
            window.attachEvent('focus', this.onWindowFocus.bind(this));
        }*/
    },
    onWindowFocus: function(){
        this.scrollHandler();
    },
    onWindowBlur: function(){
        if(this.timer){
            clearInterval(this.timer);
            this.timer = null;
        }
    },
    scrollHandler: function(){
        var _this = this;
        //_this.timer = null;
        if(_this.timer){
            clearInterval(_this.timer);
            _this.timer = null;
        }
        if(_this.props.config.type == 1){
            _this.timer = setInterval(function(){
                if(_this.marginTop == _this.refs['seamlessScroll'].childNodes[0].childNodes[0].offsetHeight){
                    _this.marginTop = 0;
                    _this.refs['seamlessScroll'].childNodes[0].appendChild(_this.refs['seamlessScroll'].childNodes[0].childNodes[0]);
                }else{
                    _this.marginTop += 1;
                }
                 _this.refs['seamlessScroll'].childNodes[0].style.marginTop = -_this.marginTop + "px";
            },_this.props.config.speed);
        }else if(_this.props.config.type == 2){
            _this.timer = setInterval(function(){
                var tm = setInterval(function(){
                    if(_this.marginTop == _this.refs['seamlessScroll'].childNodes[0].childNodes[0].offsetHeight){
                        _this.marginTop = 0;
                        _this.refs['seamlessScroll'].childNodes[0].appendChild(_this.refs['seamlessScroll'].childNodes[0].childNodes[0]);
                        clearInterval(tm);
                    }else{
                        _this.marginTop += 1;
                    }
                    _this.refs['seamlessScroll'].childNodes[0].style.marginTop = -_this.marginTop + "px";
                },_this.props.config.speed);
            },_this.props.config.stopTime);
        }
    },
    mouseMoveHandler: function(){
        if(this.timer){
            clearInterval(this.timer);
            this.timer = null;
        }
    },
    mouseOutHandler: function(){
        this.scrollHandler();
    },
    render:function(){
        return (
            <div className="ucs-seamless-scroll" ref="seamlessScroll" onmousemove={this.mouseMoveHandler.bind(this)} onmouseout={this.mouseOutHandler.bind(this)}>
                {this.props.children}
            </div>
        );
    }
});
module.exports = SeamlessScroll;